<!--
 * @Author: your name
 * @Date: 2021-09-14 09:22:37
 * @LastEditTime: 2021-09-14 10:46:22
 * @LastEditors: Please set LastEditors
 * @Description: HTML5 Canvas两点之间的折线连接动画
 * @FilePath: \gitee-kubife\biaozhu_20210910\canvas_examples\01\index.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Canvas两点之间的折线连接动画</title>
    <style>
        @import url("https://fonts.googleapis.com/css?family=Karla");

        body {
            width: 100%;
            height: 100%;
            background: #2575f7;
        }

        #theCanvas {
            width: 100%;
            height: 100%;
        }

        div#footer {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            color: white;
        }

        h3 {
            text-align: center;
            font-family: 'Karla', sans-serif;
        }
    </style>
</head>

<body>
    <canvas id="theCanvas"></canvas>
    <div id="footer">
        <h3>点击开始连线动画</h3>
    </div>
    <script>
        let c = document.getElementById("theCanvas");

        let ctx = c.getContext("2d"),
            halfWidth = window.innerWidth / 2,
            halfHeight = window.innerHeight / 2;

        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;

        c.addEventListener('click', addDot);

        let prevX = 0,
            prevY = 0,
            cx = 0,
            cy = 0;

        function addDot(e) {
            let size = 0;

            ctx.fillStyle = 'white';
            ctx.strokeStyle = 'white';

            ctx.beginPath();

            if (e.x && e.y) {
                drawDot(e.x, e.y, size);
            } else {
                drawDot(e.clientX, e.clientY, size);
            }
        }

        function drawDot(x, y, s) {
            /* console.log("---x---", x);
            console.log("---y---", y);
            console.log("---s---", s); */
            /* 生成点 */
            if (s !== 10) {
                /* console.log("---x---", x);
                console.log("---y---", y);
                console.log("---s---", s); */
                ctx.arc(x, y, s, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();
                s++;
                requestAnimationFrame(function() {
                    drawDot(x, y, s);
                });
            /* 点连线 */
            } else {
                /* alert(s); */
                if (prevX !== 0 && prevY !== 0) {
                    addLine(x, y, prevX, prevY);
                } else {
                    /* alert("点击生成第一个点的时候"); */
                    prevX = x;
                    prevY = y;
                }
            }
        }

        function addLine(x, y, px, py) {
            let goingForward = false,
                goingUp = false;

            ctx.beginPath();
            ctx.moveTo(px, py);
            cx = px;
            cy = py;
            // --- 下一个点在前一个点的右侧
            if (cx < x) {
                goingForward = true;
            }
            // --- 下一个点在前一个点的上方  
            if (cy > y) {
                goingUp = true;
            }
            /* alert(goingForward);
            alert(goingUp); */
            drawLine(x, y, goingForward, goingUp);
        }

        function drawLine(x, y, gf, gu) {
            let metX = false,
                metY = false;

            c.removeEventListener('click', addDot);

            ctx.lineTo(cx, cy);
            ctx.stroke();
            // --- x轴方向连线
            if (gf) {
                if (cx >= x) {
                    metX = true;
                }

                if (cx < x && !metX) {
                    cx += 4;
                }

            } else {
                if (cx <= x) {
                    metX = true;
                }

                if (cx > x && !metX) {
                    cx -= 4;
                }
            }
            // ---  y轴方向连线
            if (gu) {
                if (cy <= y) {
                    metY = true;
                }

                if (cy > y && !metY) {
                    cy -= 4;
                }

            } else {
                if (cy >= y) {
                    metY = true;
                }

                if (cy < y && !metY) {
                    cy += 4;
                }
            }

            if (!metY || !metX) {
                requestAnimationFrame(function() {
                    drawLine(x, y, gf, gu);
                });
            } else {
                prevX = x;
                prevY = y;
                c.addEventListener('click', addDot);
            }
        }
    </script>
</body>

</html>